<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-area-default li:after{
		content: '';
		display: block;
		clear: both;
	}
	.m-area-default li{ line-height: 24px; margin: 10px 0; }
	.m-area-default li:last-child{ text-align: center; margin-top: 30px; }
	.m-area-default .form-control{ display: inline-block; width: 240px; margin-right: 8px; }
	.m-area-default .inputDate{ 
		display: inline-block;
		width: 80px;
		padding-left: 2px;
		margin-right: 8px;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		line-height: 24px;
		transition: border-color 515ms ease-in-out;
	}
	.m-area-default .inputDate:focus{
		outline: none;
		border-color: #2580A2;
	}
	.m-area-title{ 
		background: #2580A2; 
		color: #fff; 
		line-height: 34px;
		padding-left: 8px;
		margin-top: 20px;
	}
	#userPage{ text-align: right; }
	.m-user-search{ margin: 20px 0 30px 0; }
	.m-user-search div:last-child button{margin-top: 22px;}
	.m-user-search:after{ content: ''; display: block; clear: both; }
	.userTable th, .userTable td{ text-align: center; }

</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>用户列表信息</h4>
	<div class="m-panel-body">
		<div class="m-user-search">
			<div class="col-md-3">
				<label>排序方式</label>
				<select class="form-control m-user-sort">
					<option value="ASC">正序</option>
					<option value="DESC">倒序</option>
				</select>
			</div>
			<div class="col-md-3">
				<label>排序字段</label>
				<select class="form-control m-user-sortKey">
					<option value="username">用户名</option>
					<option value="time">时间</option>
					<option value="contact_email">联系方式</option>
					<option value="realname">真实姓名</option>
				</select>
			</div>
			<div class="col-md-3">
				<label>搜索关键字</label>
				<input type="text" name="" class="form-control m-user-input" placeholder="搜索关键字" />
			</div>
			<div class="col-md-3">
				<button class="btn btn-md btn-primary userSearch"><i class="glyphicon glyphicon-search"></i></button>
			</div>
		</div>
		<div>
			<table class="table table-bordered table-impresive userTable">
				<thead>
					<tr>
						<th>用户名</th>
						<th>真实姓名</th>
						<th>联系方式</th>
						<th>上次登录时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			<div id="userPage"></div>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
var firstLoad = true;
var sortKey = 'username';
var sort = 'ASC';
var search = '';

$(".m-user-sort").change(function(){
	sort = $(this).val();
	firstLoad = true;
	loadUserList(1, sort, sortKey, search)
})

$('.m-user-sortKey').change(function(){
	sortKey = $(this).val();
	firstLoad = true;
	loadUserList(1, sort, sortKey, search);
})

$('.m-user-input').change(function(){
	search = $(this).val();
})

$('.userSearch').click(function(){
	firstLoad = true;
	loadUserList(1, sort, sortKey, search);
})



function loadUserList (page, sort, sortKey, search) 
{
	ajaxObj('/UserManage/getUserList', 'post', {page, pageSize: 10, sort, sortKey, search}, function(obj){
		$('.userTable tbody').html('');
		var str = '';
		if(obj.num){
			obj.users.map(function(data){
				var time = getLocalTime(data.time);
				str += `<tr>
								<td>${data.username}</td>
								<td>${data.realname}</td>
								<td>${data.contact_email}</td>
								<td>${time}</td>
								<td>
									<a class="btn btn-xs btn-primary" href="/UserManage/showUserDetail?uid=${data.id}">查看详情</a>
									<a class="btn btn-xs btn-info" href="/UserManage/showUserPermission?uid=${data.id}">权限</a>
									<a class="btn btn-xs btn-danger" href="javascript:deleteUser(${data.id})">删除</a>
								</td>
							</tr>`
			})
		}else{
			str += '<tr><td colspan="5">暂无记录</td></tr>'
		}
		$('.userTable tbody').append(str);

		if(firstLoad){
			firstLoad = false;
			layui.use(['laypage', 'layer'], function(){
			  var laypage = layui.laypage
			  ,layer = layui.layer;
			  
			  //总页数低于页码总数
			  laypage.render({
			    elem: 'userPage'
			    ,limit: 10
			    ,count: obj.num //数据总数	
			    ,theme: '#20A0FF'
			    ,jump: function(curr, first){
			    	!first && loadUserList(curr.curr, sort, sortKey, search)
			    }
			  });
			})
		}
})
}

function deleteUser (uid){
	var layer2 = layer.confirm('你确定要执行此操作？', {icon: 2},function(){
		layer.close(layer2);
		ajaxObj('/UserManage/deleteUser', 'get', {uid}, function(obj){
			if(obj.code == 1){
				layer.msg('操作成功！');
				loadUserList(1);
			}
		})
	})
}

loadUserList(1);


</script>
<{/block}>